<template>
  <ul class="detail-comment-list">
    <li class="detail-comment-item"  v-for="(item,index) in Commet" :key="index">
      <el-row class="detail-comment-item__info" type="flex" justify="space-between" align="middle">
        <el-row type="flex" align="middle">
          <el-image src="http://157.122.54.189:9095/assets/images/avatar.jpg" />
          <span class="username">{{ item.account.nickname }}</span>
          <span class="time">{{item.created_at | Commenttime }}</span>
        </el-row>
        <!-- <span class="floor-num">{{ item.level }}</span><br> -->
        <span class="floor-num">{{ item.content }}</span>
      </el-row>
      <div class="detail-comment-item__content">
        <div
          @pic-preview="picPreview"
          @reply-comment="replyComment"
        />
        <div class="comment-new">
          <p class="comment-new__message"></p>
          <el-row type="flex" v-if="Commet.pics && Commet.pics.length > 0">
            <div
              class="comment-new__pic"
              v-for="pic in Commet.pics"
              :key="pics.id"
              @click="picPreview(baseURL + pice.url)"
            >
              <el-image/>
            </div>
          </el-row>
          <div class="comment-new__reply">
            <a href="javascript:;" >回复</a>
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
import { PostCommentUser } from '@/utils/apis/post'
export default {
  data(){
   return{
      Commet:[]
   }
  },
  props: {
    CommetContents: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    picPreview (picUrl) {
      this.$emit('pic-preview', picUrl)
    },
    replyComment (id, nickname) {
      this.$emit('reply-comment', id, nickname)
    }
  },
      // 过滤器
      filters: {
    Commenttime (time) {
      const date = new Date(time)
      const MM = date.getMonth() + 1
      const YYYYMMDD = [
        date.getFullYear(),
        MM < 10 ? `0${MM}` : MM,
        date.getDate()
      ].join('-')
      const hhmm = [
        date.getHours(),
        date.getMinutes()
      ].join(':')
      return YYYYMMDD + ' ' + hhmm
    }
  },
  computed: {
    baseURL () {
      return this.$axios.defaults.baseURL
    }
  },
 async mounted () {
    let res = await PostCommentUser()
    console.log(res);
    this. Commet=res.data.data
  
  }
}
</script>

<style lang="less" scoped>
.detail-comment-list {
  border: 1px solid #ddd;
}
.detail-comment-item {
  padding: 20px 20px 5px;
  border-bottom: 1px dashed #ddd;
 .detail-comment-item:last-child {
    border-bottom: none;
  }
  .detail-comment-item__info {
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;
    .el-image,
    .username {
      margin-right: 5px;
    }
    .el-image {
      width: 16px;
      height: 16px;
    }
    .time {
      color: #999;
    }
  }
  .detail-comment-item__content {
    padding-left: 30px;
    .comment-new {
      .comment-new__message {
        margin-top: 10px;
      }

      .comment-new__pic {
        width: 80px;
        height: 80px;
        padding: 5px;
        margin-right: 5px;
        margin-top: 10px;
        border: 1px dashed #ddd;
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
        .el-image {
          height: 100%;
          ::v-deep .el-image__inner {
            display: block;
            object-fit: cover;
          }
        }
      }

     .comment-new__reply {
        height: 20px;
        line-height: 20px;
        text-align: right;
        color: #1e50a2;
         .comment-new__reply:hover a {
          display: inline;
        }
        a {
          display: none;
          font-size: 12px;
           .comment-new__reply:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
